<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue2</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example">
			<p>Original message:"{{ message }}"</p>
			<p>Computed reversed message:"{{ reversedMessage }}"</p>
			<p>fullname:"{{fullname}}"</p>
			<p>{{firstname}} + {{lastname}}</p>
			<p>在这里可以修改名字<input v-model="fullname"></p>
		</div>
		
		<div id="app">
			<div
			  class="static"
			  v-bind:class="{active:isActive,'text-dager':hasError}"
			></div>
			
		</div>
		
		<div id="app2">
			<button type="text" @click="toggle">切换登录方式</button>
			<template v-if="loginType === 'username'">
			  <label>Username</label>
			  <input placeholder="Enter your username">
			</template>
			<template v-else>
			  <label>Email</label>
			  <input placeholder="Enter your email address">
			</template>
			
		</div>
		
		<div id="app3">
			<ul>
				<li v-for='item in items' :key='item.message'>
					{{parentMessage}}---------{{item.message}}
				</li>
				
				<li v-for="val,name in object" :key='name'>
					{{name}}--------{{val}}
				</li>
				
				<li v-for="num in evennum">
					{{num}}
					
				</li>
			</ul>
		</div>
		
		<div id="app4">
			<form @submit.prevent="addNewTodo">
				<label>Add a todo</label>
				<input v-model="newTodoText" id='newtodo' />
				<button>Add</button>
			</form>
			<ul>
				<todo-item
				    v-for="(todo,index) in todos"
					:key='todo.id'
					:title='todo.title'
					@remove='todos.splice(index,1)'
				></todo-item>
			</ul>
		</div>
		
		<div id="app5">
		  <button v-on:click="counter1 += 1">Add 1</button>
		  <p>The button above has been clicked {{ counter1 }} times.</p>
		  <button v-on:click="incre('hello,a message++')" name='hello'>click me :{{ counter2 }}</button>
		</div>
		
		<div id="app6">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span><br>
			<!-- lazy:在“change”时而非“input”时更新 -->
			<input v-model.lazy.trim="msg" @change="len" />{{msg}}
		</div>
		
		<div id="components-demo">
		  <button-counter :count="count"></button-counter>
		</div>
		
		<!-- post is undefined -->
		<!-- <div id="app7" :style="{postFontSize:postFontSize+'em'}">
			<blog-post 
			    v-for='post in posts' 
				:post="post"
				:key='post.id'
				@enlarge-text='postFontSize+=0.1'
			></blog-post>
		</div> -->
		
		
		<div id='app8'>
			<input
			   v-bind:value="searchText"
			   v-on:input="searchText=$event.target.value"/>
			   {{searchText}}
		</div>
	</body>
	<script>
		let app8=new Vue({
			el:'#app8',
			data:{
				searchText:'Hello'
			},
			methods:{
				
			}
		})
		
		Vue.component('blog-post',{
			pros:['post'],
			postFontSize: 1,
			template:`
			<div class="blog-post">
			      <h3>{{ post.title }}</h3>
				  <button @click='$emit("enlarge-text")'>enlarge text</button>
			      <div v-html="post.content"></div>
			    </div>
			`
		})
		
		// let app7=new Vue({
		// 	el:'#app7',
		// 	data:{
		// 		posts:[
		// 			{id:1,title:'My journey with Vue',content:'123'},
		// 			{id:2,title:'Blogging with Vue',content:'abc'},
		// 			{id:3,title:'Why Vue is so fun' ,content:'xyz'}
		// 		]
		// 	},
		// 	methods:{
				
		// 	}
		// })
		
		
		// 定义一个名为 button-counter 的新组件
		Vue.component('button-counter', {
			props:['count'],//组件的属性
			template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
		})
		
		
		let componentsdemo=new  Vue({ 
			el: '#components-demo',
			data:{
				count:100
			},
			methods:{
				
			}
		})
		
		
		let app6=new Vue({
			el:'#app6',
			data: {
				msg:'hello',
			    checkedNames: []
			  },
			  methods:{
				  len:function(){
				    this.msg.length
				  }
			  }
		})
		
		var app5 = new Vue({
		  el: '#app5',
		  data: {
		    counter1: 0,
			counter2:0
		  },
		  methods:{
			  incre:function(msg,event){
				  this.counter2++
				  console.log(msg)
			  }
		  }
		})
		
		Vue.component('todo-item',{
			template:'\
			<li>\
			  {{ title}}\
			  <button v-on:click="$emit(\'remove\')">Remove</button>\
			</li>\
			',
			props: ['title']
			})
			
		let app4=new Vue({
			  el: '#app4',
			  data: {
			    newTodoText: '',
			    todos: [
			      {
			        id: 1,
			        title: 'Do the dishes',
			      },
			      {
			        id: 2,
			        title: 'Take out the trash',
			      },
			      {
			        id: 3,
			        title: 'Mow the lawn'
			      }
			    ],
			    nextTodoId: 4
			  },
			  methods: {
			    addNewTodo: function () {
			      this.todos.push({
			        id: this.nextTodoId++,
			        title: this.newTodoText
			      })
			      this.newTodoText = ''
			    }
			  }
			})
			
		let app3=new Vue({
			el:'#app3',
			data:{
				parentMessage:'Parent',
				items:[
					{message:'Foo'},
					{message:'Bar'}
				],
				object:{
					title:'How to do lists in Vue',
					author:'Jane Doe',
					publishedAt:'2016-4-10'
				},
				numbers:[1,2,3,4,5,6,7,8,9]
			},
			computed:{
				evennum:function (){//过滤器
					return this.numbers.filter(function (num) {
						return num % 2 == 0
					})
				}
			},
			methods:{
				
			}
		})
		let app2=new Vue({
			el:'#app2',
			data:{
				loginType:'username'
			},
			methods:{
				toggle:function(){
					if(this.loginType=='username')
					    this.loginType='email'
					else
					    this.loginType='username'
				}
			}
		})
		let app=new Vue({
			el:'#app',
			data:{
				isActive:true,
				hasError:false
			}
		})
		var vm=new Vue({
			el:'#example',
			data:{
				message:'Hello',
				firstname:'boo',
				lastname:'bar'
				// fullname:'boo bar'
			},
			// watch:{
			// 	firstname:function(val){
			// 		this.fullname=val+' '+this.lastname
			// 	},
			// 	lastname:function(val){
			// 		this.fullname=this.firstname+' '+this.lastname
			// 	}
			// },
			computed:{
				fullname:{
					get:function(){
						return this.firstname+' '+this.lastname
					},
					set:function(newval){
						let names=newval.split(' ')
						this.firstname=names[0]
						this.lastname=names[1]
					}
				},
				
				//计算属性的getter
				reversedMessage:function(){
					//'this'指向vm实例
					return this.message.split("").reverse().join("")
				}
			}
		})
	</script>
</html>
